<template>
  <div class="fieldList">
    <el-card >
    <el-table 
    ref="dragTable"
    
    :data="userTable" style="width: 100%">
    <el-table-column type="index" label="序号" width="60"></el-table-column>
    <el-table-column prop="field"  label="字段列名">
    
    </el-table-column>
        <el-table-column prop="label" label="字段描述">
    <template #default="scope">
       <el-input v-model="scope.row.label" size="mini" clearable></el-input>
      </template>
    </el-table-column>
            <el-table-column prop="sqlType" label="物理类型">
    
    </el-table-column>
       <el-table-column prop="javalabel" label="java数据类型">
     <template #default="scope">
                <el-select v-model="scope.row.javaType">
                
                <el-option
                v-for="item in javaTypes"
                 :key="item.value" 
                 :label="item.label" 
                 :value="item.value" />
              </el-select>
      </template>
    </el-table-column>
     <el-table-column prop="prop" label="列表字段" >
      <template #default="scope">
       <el-input v-model="scope.row.prop" size="mini" clearable></el-input>
      </template>
    </el-table-column>
         <el-table-column prop="label" label="字典类型" >
      <template #default="scope">
                <el-select
                v-model="scope.row.dict"
                placeholder="请输入"
                size="mini"
                clearable
                style="width: 140px"
              >
                <el-option label="不固定" value="" />
                <el-option label="固定到列头" value="left" />
                <el-option label="固定到列尾" value="right" />
              </el-select>
      </template>
    </el-table-column>
       <el-table-column prop="label" label="必填">
    <template #default="scope">
       <el-checkbox label="" :true-value="true"
       :false-value="false"
        v-model="scope.row.required"></el-checkbox>
      </template>
    </el-table-column>
  </el-table>
  <div class="aic jcc mt20">
    <el-button type="primary" @click="handleSave">保存</el-button>
  </div>
  </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, shallowRef, toRaw, nextTick } from "vue";
import { javaTypes } from "../data";
import {
userTableFields
} from '../mock/index'

const userTable = ref(userTableFields);
const draggingIndex = shallowRef(null); // 记录拖拽行的索引
  // 项目列表数据
const dragTable = ref()
const state = reactive({});
 
        const handleSave = () =>{
        }
onMounted(() => {
});
</script>

<style scoped lang="scss">
.fieldList{
}
</style>
